<template>
  <div class="drag2">
    <div class="left_course">
      <div class="left_course_main">
        <div class="left_course_main_title">课程</div>
        <div
          v-for="item in courseList"
          :key="item.id + 'course' + Math.random()"
          class="left_course_main_item"
          :style="{ background: item.color }"
          draggable="true"
          @dragstart="dragStart($event, item)"
          @dragover="dragOver($event)"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="right_course" @dragover="dragOver($event)">
      <div class="right_course_main">
        <div class="right_course_main_title">课程表</div>
        <div class="right_course_main_content" @drop="dragEnd">
          <div
            v-for="item in lessonList"
            :key="item.id + 'lesson' + Math.random()"
            class="right_course_main_item"
            :style="{ background: item.color }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getRandomColor } from '@/utils'
export default {
  name: 'DRAG2',
  computed: {
    courseList() {
      const list = [
        {
          name: '语文',
          id: 1,
        },
        {
          name: '数学',
          id: 2,
        },
        {
          name: '英语',
          id: 3,
        },
        {
          name: '物理',
          id: 4,
        },
        {
          name: '化学',
          id: 5,
        },
        {
          name: '生物',
          id: 6,
        },
        {
          name: '历史',
          id: 7,
        },
        {
          name: '地理',
          id: 8,
        },
        {
          name: '政治',
          id: 9,
        },
        {
          name: '体育',
          id: 10,
        },
        {
          name: '音乐',
          id: 11,
        },
      ]
      list.forEach((item) => {
        item.color = getRandomColor()
      })
      return list
    },
  },
  data() {
    return {
      lessonList: [],
    }
  },
  mounted() {
    this.lessonList = []
  },
  methods: {
    getRandomColor,
    dragStart(e, item) {
      e.dataTransfer.setData('item', JSON.stringify(item))
    },
    dragOver(e) {
      e.preventDefault()
    },
    dragEnd(e) {
      console.log('ce', e)
      e.preventDefault()
      const item = JSON.parse(e.dataTransfer.getData('item'))
      item.y = e.offsetY
      item.x = e.offsetX
      if (!this.lessonList.length) {
        this.lessonList.push(item)
      } else {
        const index = this.lessonList.findIndex((v) => {
          return v.y > item.y
        })
        if (index === -1) {
          this.lessonList.push(item)
        } else {
          this.lessonList.splice(index, 0, item)
        }
      }
    },
  },
}
</script>
<style lang="less" scoped>
.column-gap {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}
.drag2 {
  display: flex;
  column-gap: 30px;
}
.left_course {
  width: 200px;
  border: 1px solid #000;
  padding: 20px;
  &_main {
    width: 100px;
    .column-gap;
    margin: 0 auto;
    &_title {
      text-align: center;
      font-size: 18px;
      color: pink;
      font-weight: 600;
    }
    &_item {
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
}
.right_course {
  width: 200px;
  border: 1px solid #000;
  padding: 20px;
  &_main {
    width: 100px;
    .column-gap;
    margin: 0 auto;
    height: 100%;
    &_title {
      text-align: center;
      font-size: 18px;
      color: #ccc;
      font-weight: 600;
    }
    &_content {
      height: 100%;
      display: flex;
      .column-gap;
    }
    &_item {
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
}
</style>
